<template>
<!-- 申请开课 -->
  <div>
      <!-- 页头 -->
      <el-card class="box-card">
        <el-page-header @back="goBack" content="申请开课"></el-page-header>
     </el-card>
     <el-card class="box-card">
         <!-- 步骤条 -->
       <el-steps :active="active" finish-status="success" simple style="margin:20px 0;">
            <el-step title="基本信息" ></el-step>
            <el-step title="课时信息" ></el-step>
            <el-step title="线下报名资格" ></el-step>
            <el-step title="提交审核" ></el-step>
        </el-steps>
        <!-- 基本信息 -->
        <basicInformation v-if="active==0"></basicInformation>
        <!-- 课时信息 -->
        <courseContent v-else-if="active==1"></courseContent>
        
        <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
     </el-card>
    
  </div>
</template>

<script>
import basicInformation from '../components/basicInformation'
import courseContent from './courseContent'
export default {
  name: 'applyCourse',
  components:{
    basicInformation,
    courseContent
  },
  data(){
      return{
          active:0,//默认显示第一个基本信息
          
      }
  },
  methods: {
    //   回到上一步
      goBack() {
        this.$router.go(-1);//返回上一层
      },
    //   点击下一步
      next() {
        if (this.active++ > 2) this.active = 0;
      }
  },
}
</script>

<style lang="less" scoped>
</style>
